<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
       list-style: none;/*把li前的.去掉*/
       margin: 0;
       padding: 0;
        }
        #wrap{
            width: 100%; height: 1450px; 
            background: url(images/wrapper_bg.png);
            background-repeat: repeat-x;/*只在x方向重出现*/
        }
        #header{
            width: 1000px;
            height: 135px;
            margin: 0 auto;
        }
        #head1{
            width: 100%;
            height: 28px;
        }
        .h1d1{
            float: left;
            font-size: 13px;
            color: #999;
            margin-top: 3px;
        }
        .h1d2{
            float: left;
            width: 43px;
            height: 25px;
            background: url(images/separator.png);
        }
        #head2{
            width: 1000px;
            height: 70px;
        }
        #logo{
            float: left;width: 193px;height: 40px;
            margin-top: 18px;margin-left: 8px;
        }
        #search{
            float: left;
            margin-left: 473px;margin-top: 20px;
            background:url(images/search_box.png);
            width: 325px;height: 32px;
        }
        #search input:focus{
            outline: none;
        }
        #head3{
            width: 1000px;
            height: 35px;
        }
        #head3 li{
            float: left; color: #fff;
            font-size: 18px;margin-top: 4px;
            /* border: 1px #ccc dashed; */
            padding: 2px 30px;
        }
        #head3 li:hover{
            background-color: #e94f0d;
            cursor: pointer;/*鼠标变手*/
        }
        #banner{
            width: 1000px;
            height: 400px;
            background: url(images/banner_7.5.1.jpg);
            margin: 0 auto;
            position: relative;
        }
        #b1{
            position: absolute;
            left: 540px;
            top:240px;
        }
        #b2{
            width: 273px;
            height: 70px;
            background: url(images/btn_down_pc_7.5.0.png);
            position: absolute;
            left: 540px;
            top: 272px;
        }
        #b2:hover{
            cursor:pointer;
            background-position: 0 -70px;
        }
        #con{
            width: 1000px;
            height: 920px;
            /* border:1px red dashed; */
            margin: 0 auto;
        }
        #left{
            width: 710px;
            height: 920px;
            float: left;
        }
        #right{
            width: 270px;
            height: 920px;
            float: left;
            margin-left: 16px;
        }
        #pi{
            width: 700px;
            height: 540px;
            background: url(images/side_title.png);
            background-repeat: no-repeat;
            padding-top:30px;
            border: 1px red dashed;
        }
        .p_style{
            width: 334px;
            height: 157px;
            background: url(images/skin_border.png);
            background-repeat: no-repeat;
            padding-top: 5px;
            padding-left: 5px;
            margin-top: 6px;
        }
        #kz{
            width: 700px;
            height: 160px;
        }
        #kz li{
            float: left;
        }
        .kz_p{
            width: 90px;
            height: 90px;
            margin-left: 10px;
        }
        .kz_b{
            width: 76px;
            height: 24px;
            margin-left: 12px;
        }
        #ck{
            width: 700px;
            height: 150px;
            background: url(images/dict_show_title.png);
            background-repeat: no-repeat;
            margin-top: 30px;
            padding-top: 30px;
        }
        #ck li{
            float: left;
            width: 90px;
            height: 116px;
            margin: 0 10px;
        }
        .ck_p{
            text-align: center;
            font-size: 14px;color: #999;
        }
        #ac{
            width: 270px;
            height: 170px;
            background: url(images/new_activity.png);
            background-repeat: no-repeat;
            padding-top: 30px;
        }
        #ac li{
            width: 230px;
            height: 18px;
            background: url(images/activity_bg.png);
            background-position: 0 6px;
            padding: 10px 25px;
            background-repeat: no-repeat;
        }
        #ac li:nth-of-type(odd){
            color: #f00;
        }
        #ac li:nth-of-type(even){
            color: #999;
        }
        #gu{
            width: 260px;
            height: 640px;
        }
        #gu div{
            margin-top: 4px;
        }
        #bu{
            width: 1000px;
            height: 50px;
            text-align: center;
            margin: 0 auto;
            color: #999;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id="head1">
                <ul>
                    <li>
                        <div class="h1d1">输入法手机版</div>
                        <div class="h1d2"></div>
                    </li>
                    <li>
                        <div class="h1d1">输入法mac版</div>
                        <div class="h1d2"></div>
                    </li>
                    <li>
                        <div class="h1d1">输入法企业版</div>
                        <div class="h1d2"></div>
                    </li>
                    <li>
                        <div class="h1d1">输入法linux版</div>
                        <div class="h1d2"></div>
                    </li>
                    <li>
                        <div class="h1d1">五笔输入法</div>
                        <div class="h1d2"></div>
                    </li>
                    <li>
                        <div class="h1d1">输入法开发平台</div>
                 
                    </li>
                </ul>
            </div>
            <div id="head2">
                <div id="logo">
                    <img src="images/logo.png" alt="">
                </div>
                <div id="search">
                    <input type="text" value="找皮肤.." style="color: #999; 
                    width: 292px;height: 28px;" onfocus="this.value=''">           
                </div>
            </div>
            <div id="head3">
                <ul>
                    <li>首页</li>
                    <li>皮肤</li>
                    <li>词库</li>
                    <li>帮助</li>
                    <li>升级日志</li>
                    <li>论坛</li>
                </ul>
            </div>
        </div>
        <!--头结束-->
        <div id="banner">
            <div id="b1">
            <span style="color: #e2dabd;">更新：2024-06-20</span>
            &nbsp;&nbsp;&nbsp;<span style="color: #f00;">新版本特性</span>
            </div>
            <div id="b2"></div>
        </div>
        <!--banner结束-->
        <div id="con">
            <div id="left">
                <div id="pi">
                    <div style="width: 334px;float: left;margin-left: 10px;">
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                    </div>
                    <div style="width: 334px;float: left;margin-left: 10px;">
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                        <div class="p_style">
                            <img src="images/14316772942017_former.jpg" alt="">
                            <p style="font-size: 14px;margin-top: 6px;color: black;">
                                [左文字]男神快来壁咚我
                            </p>
                        </div>
                    </div>
                </div>
                <!--pi结束-->
                <div id="kz">
                    <img src="images/ex_func_title.png" alt="">
                    <div style="width: 700px;">
                        <ul>
                            <li>
                                <div class="kz_p">
                                    <img src="images/id_1.png" alt="">
                                </div>
                                <div class="kz_b" 
                                style="background: url(images/down_ex_func.png);"> 
                                </div>
                            </li>
                            <li>
                                <div class="kz_p">
                                    <img src="images/id_1.png" alt="">
                                </div>
                                <div class="kz_b" 
                                style="background: url(images/down_ex_func.png);
                                background-position: -76px 0;"> 
                                </div>
                            </li>
                            <li>
                                <div class="kz_p">
                                    <img src="images/id_1.png" alt="">
                                </div>
                                <div class="kz_b" 
                                style="background: url(images/down_ex_func.png);
                                background-position: -152px 0;"> 
                                </div>
                            </li>
                            <li>
                                <div class="kz_p">
                                    <img src="images/id_1.png" alt="">
                                </div>
                                <div class="kz_b" 
                                style="background: url(images/down_ex_func.png);
                                background-position: -228px 0;"> 
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--扩展结束-->
                <div id="ck">
                    <div>
                        <ul>
                            <li>
                                <img src="images/list_1.png" alt="">
                                <div class="ck_p">网络流行</div>
                            </li>
                            <li>
                                <img src="images/list_2.png" alt="">
                                <div class="ck_p">网络流行</div>
                            </li>
                            <li>
                                <img src="images/list_3.png" alt="">
                                <div class="ck_p">网络流行</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="right">
                <div id="ac">
                    <ul>
                        <li>搜狗输入法发布指令</li>
                        <li>新词特色发布指令</li>
                        <li>萌萌的输入法指令</li>
                        <li>想做皮肤法发布指令</li>
                    </ul>
                </div>
                <div id="gu">
                    <div><img src="images/focus_ewn.png" alt=""></div>
                    <div><img src="images/download_list.2.5.2.jpg" alt=""></div>
                    <div><img src="images/skin_pic.jpg" alt=""></div>
                </div>
            </div>
        </div>
        <!--con结束-->
        <div id="bu">
            网站地图-企业推广-各种输入法-招聘人才<br/>
            @2024-06 sougou.com 11111-202号
        </div>
    </div>
</body>
</html>